<template>
  <!--用户页面-->
  <div id="top">
    <div>
      <el-card id="search">
        <el-input v-model="userInfo" placeholder="请输入用户名"></el-input>
        <el-button type="primary" plain @click="doQury()">查询</el-button>
      </el-card>
    </div>
    <el-row>
      <el-table :data="currentPageData" stripe style="width: 100%">
        <el-table-column prop="uid" label="用户ID" width="330"/>
        <el-table-column prop="uname" label="用户昵称" width="330"/>
        <el-table-column prop="uphone" label="手机号" width="350"/>
        <el-table-column prop="standing.standing" label="用户身份" width="320"/>
        <el-table-column fixed="right" label="操作" width="330">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="viewDetall(scope.row)">
              查看更多
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--  分页组件-->
    <el-pagination
        v-model="currentPage"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalData.length"
        @current-change="handleCurrentChange">
    </el-pagination>

  </div>
  <!--  查看-->
  <el-dialog
      v-model="dialogVisible"
      title="其他详情"
      width="30%"
      :before-close="handleClose">
    <table>
      <tr>
        <td>真实姓名 ： </td>
        <td>{{users.urealname}}</td>
      </tr>
      <tr>
        <td>身份证号 ： </td>
        <td>{{users.idnumber}}</td>
      </tr>
      <tr>
        <td>登录密码 ： </td>
        <td>{{users.upassword}}</td>
      </tr>
    </table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script>

import doThis from "@/api/getData";

export default {
  name: "UserList",
  data(){
    return{
      nowsize: 5,
      userList: [],
      userInfo:'',
      users:{},
      dialogVisible:false,
      //  分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条数
    }
  },
  computed:{
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const { totalData, currentPage, pageSize } = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      return totalData.slice(start, end);
    },
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    // 切换页码时的回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    getUserList() {
      doThis.doGet("/user/list", null).then(res => {
        console.log('用户全部======', res.data)
        this.tableData = res.data
        this.totalData = res.data
      })
    },
    viewDetall(row) {
      this.users = row
      this.dialogVisible = true
    },
    doQury() {
      doThis.doGet('/user/list', {uname: this.userInfo}).then(res => {
        console.log('----搜索----', res.data)
        this.tableData = res.data
        this.totalData = res.data
      })
    },
  }
}
</script>

<style scoped>
#top{
  margin-top: 47px;
  margin-left: -30px;
  background-color: #EBEBEB;
}

#search .el-input {
  width: 200px;
  margin-left: 30px;
  margin-right: 30px;
}

#search .el-button {
  margin-left: 30px;
  margin-right: 30px;
}
</style>
